<template>
	<view class="container">
		<view class="login">
			<view class="loginTitle">找回密码</view>
			<uni-forms ref="findpwd" label-position="top" label-width="100px" :modelValue="formData">
				<uni-forms-item label="手机号" name="user_mobile">
					<uni-easyinput type="number" v-model="formData.user_mobile" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="手机验证码" name="mobile_code">
					<view class="sms">
						<uni-easyinput type="number" v-model="formData.mobile_code" placeholder="请输入手机验证码" />
						<view class="smsBtn">
							<button type="primary" :disabled="isGetPhone" @click="getPhoneCode">{{ smstxt }}</button>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="新密码" name="new_password">
					<uni-easyinput type="password" v-model="formData.new_password" placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="captcha">
					<view class="captcha">
						<uni-easyinput type="text" v-model="formData.captcha" placeholder="请输入验证码" />
						<view class="captchaImg" @click="getCaptcha">
							<image :src="captcha" mode=""></image>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<button class="loginBtn" @click="submitForm" type="primary" :loading="btnLoading">重置密码</button>
			<view class="tips">
				<navigator class="a" url="./login" open-type="navigateBack">返回登录</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import admin from '@/api/admin';
import { isPhone } from '@/utils/validate';
export default {
	data() {
		return {
			btnLoading: false,
			captcha: '',
			smstxt: '获取验证码',
			isGetPhone: false,
			timertimer: 0,
			formData: {
				user_mobile: '',
				mobile_code: '',
				new_password: '',
				captcha: '',
				captcha_id: ''
			},
			rules: {
				user_mobile: {
					rules: [
						{
							required: true,
							errorMessage: '请填写手机号'
						},
						{
							validateFunction: function (rule, value, data, callback) {
								if (!isPhone(value)) {
									callback('请输入正确的手机号');
								}
								return true;
							}
						}
					],
					validateTrigger: 'submit'
				},
				mobile_code: {
					rules: [
						{
							required: true,
							errorMessage: '请填写验证码'
						}
					],
					validateTrigger: 'submit'
				},
				new_password: {
					rules: [
						{
							required: true,
							errorMessage: '请填写密码'
						},
						{
							minLength: 6,
							maxLength: 20,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					validateTrigger: 'submit'
				},
				captcha: {
					rules: [
						{
							required: true,
							errorMessage: '请填写验证码'
						}
					],
					validateTrigger: 'submit'
				}
			}
		};
	},
	onReady() {
		this.$refs.findpwd.setRules(this.rules);
		this.getCaptcha();
	},
	methods: {
		submitForm() {
			this.$refs.findpwd.validate().then((res) => {
				this.btnLoading = true;
				admin
					.findpwd(this.formData)
					.then((data) => {
						if (data.ret == 200) {
							this.btnLoading = false;
							uni.showToast({
								title: '重置成功'
							});
							setTimeout(() => {
								uni.hideToast();
								uni.navigateBack();
							}, 1000);
						} else {
							this.btnLoading = false;
							this.getCaptcha();
						}
					})
					.catch(() => {
						this.btnLoading = false;
						this.getCaptcha();
					});
			});
		},
		getPhoneCode() {
			this.$refs.findpwd.validateField('user_mobile').then((res) => {
				let codeData = {
					phone_numbers: this.formData.user_mobile,
					sms_mark: 'user_findpass'
				};
				admin.smsCode(codeData).then((res) => {
					if (res.ret == 200) {
						uni.showToast({
							title: '验证码已发送至您手机，请注意查收。',
							icon: 'none'
						});
						this.isGetPhone = true;
						this.smstxt = '获取验证码60s';
						let n = 60;
						this.timertimer = setInterval(() => {
							if (n > 0) {
								n--;
								this.smstxt = '获取验证码' + n + 's';
							} else {
								clearInterval(this.timertimer);
								this.smstxt = '获取验证码';
								this.timertimer = null;
								this.isGetPhone = false;
							}
						}, 1000);
					}
				});
			});
		},
		getCaptcha() {
			admin.captcha({}).then((res) => {
				this.captcha = res.data.captcha_img;
				this.formData.captcha_id = res.data.captcha_id;
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	box-sizing: border-box;
	width: 100vw;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	padding-top: 5vh;
	background: #fff;

	.login {
		width: 92vw;
		.loginTitle {
			font-size: 40rpx;
			font-weight: bolder;
			margin-bottom: 100rpx;
		}

		.loginBtn {
			background: $uni-primary;
			margin-top: 100rpx;
		}
		.tips {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			.a {
				font-size: 26rpx;
				text-decoration: underline;
				color: #999;
			}
		}
		.is-input-border {
			border: none;
			border-bottom: 1px solid;
			border-radius: 0;
		}
		.uni-forms-item__label {
			padding: 0 !important;
			height: 42rpx;
			line-height: 42rpx;
		}
		.captcha {
			display: flex;
			justify-content: space-between;
			.captchaImg {
				cursor: pointer;
				width: 175rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				overflow: hidden;
				border-radius: 6rpx;
				margin-left: 20rpx;
				image {
					width: 175rpx;
					height: 70rpx;
					object-fit: cover;
				}
			}
		}
		.sms {
			display: flex;
			justify-content: space-between;
			.smsBtn {
				cursor: pointer;
				width: 200rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				overflow: hidden;
				border-radius: 6rpx;
				margin-left: 20rpx;
				button {
					width: 200rpx;
					height: 70rpx;
					font-size: 26rpx;
					padding: 0;
					text-align: center;
					line-height: 70rpx;
				}
			}
		}
	}
}
</style>
